<template>
  <div
    class="m-tip"
    :class="[
        type ? 'm-tip--' + type : '',
        inline ? 'is-inline' : ''
     ]"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Tip",
  props: {
    type: {
      type: String,
      default: "default"
    },
    inline: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";
.m-tip {
  &--default {
    font-size: 12px;
    color: $--hint-major;
    font-weight: 400;
  }

  &.is-inline {
    display: inline-block;
    vertical-align: top;
  }
}
</style>